<template>
  <div class="flex gap-2" :v-loading="loading">
    <el-tag
      v-for="tag in item.goodsSkusCardValue"
      :key="tag"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)"
      effect="plain"
    >
      <!-- change:值改变，并且失去焦点时触发 -->
      <el-input class="w-20 ml-[-10px]" v-model="tag.text" 
        placeholder="选项值" size="small" clearable @change="handleChange($event, tag)" />
    </el-tag>
    <el-input
      v-if="inputVisible"
      ref="InputRef"
      v-model="inputValue"
      class="w-20"
      size="small"
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <el-button v-else class="button-new-tag" size="small" @click="showInput">
      添加选项值
    </el-button>
  </div>
</template>

<script setup>
  import { initSkuCardItem } from '@/hooks/useSku.js'

  const props = defineProps({
    skuCardId: [Number, String],
  })
  const { 
    item,
    inputValue,
    inputVisible,
    InputRef,
    handleClose,
    showInput,
    handleInputConfirm,
    loading,
    handleChange
  } = initSkuCardItem(props.skuCardId)
</script>

<style scoped></style>
